<template>
  <!-- 面包屑导航 -->
  <el-breadcrumb separator="/" class="custom-breadcrumb">
    <el-breadcrumb-item><span class="breadcrumb-strong">首页</span></el-breadcrumb-item>
    <el-breadcrumb-item><span class="breadcrumb-strong">流程引擎</span></el-breadcrumb-item>
    <el-breadcrumb-item>表单分类管理</el-breadcrumb-item>
  </el-breadcrumb>
  <el-card>
    问题编号：
    <el-input placeholder="请输入问题编号" style="width: 200px;" v-model="Look.TypeNo"></el-input>
    &nbsp;
    所属行业：
    <el-select placeholder="请选择行业" v-model="Look.ProfessionalId" style="width: 150px;">
      <el-option v-for="item in FromTypeSel" :value="item.ProfessionalName">{{ item.ProfessionalName }}</el-option>
    </el-select>

    <br>

    <el-button @click="Show" type="primary" style="margin: 20px;">查询</el-button>
    &nbsp;
    <el-button @click="Resert" type="danger">重置</el-button>
  </el-card>

  <br>
  <br>

  <el-card>

    <!-- 新增按钮 -->
    <el-button type="success" @click="dialogFormVisible = true">新增</el-button>

    <!-- 弹出框 -->
    <el-dialog v-model="dialogFormVisible" :title="Addelmessage" max-width="500">

      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto">
        <el-form-item label="问题分类名称" prop="TypeName">
          <el-input v-model="ruleForm.TypeName" />
        </el-form-item>

        <el-form-item label="所属行业" prop="ProfessionalId">
          <el-select v-model="ruleForm.ProfessionalId" placeholder="请选择行业">
            <el-option v-for="item in FromTypeSel" :value="item.ProfessionalId">{{ item.ProfessionalName }}</el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="inputUser">
            {{ AddButton }}
          </el-button>
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>


    <!-- 表单列表 -->
    <el-table :data="FormTypeInfoList.pageData" style="width: 100%; margin: 30px;">
      <el-table-column fixed type="index" label="序号" width="150" />
      <el-table-column prop="TypeId" label="id" />
      <el-table-column prop="TypeNo" label="问题编号" />
      <el-table-column prop="TypeName" label="问题类型名称" />
      <el-table-column prop="ProfessionalName" label="所属行业">
        <template #default="scope">
          <el-tag v-if="scope.row.ProfessionalId == 1">行政</el-tag>
          <el-tag v-else-if="scope.row.ProfessionalId == 2">公安</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作列" min-width="120">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="Del(scope.row.TypeNo)">
            删除
          </el-button>
          <el-button link type="primary" size="small" @click="AdminInfo(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <Pagination :current-page="Look.PageIndex" :page-size="Look.PageSize" :total-count="FormTypeInfoList.TotalCount"
    :total-page="FormTypeInfoList.TotalPage" @size-change="handleSizeChange" @current-change="handleCurrentChange">
  </Pagination>



</template>

<script lang="ts" setup>
import axios from 'axios';
import { ref, reactive, onMounted, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import { type FormInstance, type FormRules } from 'element-plus'

import Pagination from '@/components/Pagination.vue'

import { PageFormType, AddFormType, UpdateFormType, GetGirdList, DelFormType } from '@/api/formType'//引入表单分类管理

//定义表单分类下拉框的接口
interface IfromTypeList {
  ProfessionalId: number,
  ProfessionalName: string
};

//生命周期钩子函数
onMounted(() => {
  Show();
  FromTypeSelect();
})

//弹出层
const dialogFormVisible = ref(false)

let Addelmessage = '表单分类管理-新增'

let AddButton = "新增"

// 弹出框
const AdminInfo = (row: any) => {


  AddButton = "修改"
  Addelmessage = '表单分类管理-修改'


  ruleForm.TypeId = row.TypeId
  ruleForm.TypeNo = row.TypeNo
  ruleForm.TypeName = row.TypeName
  ruleForm.ProfessionalId = row.ProfessionalId

  dialogFormVisible.value = true
}


/*修改 弹出框
const Update = (e: any, row: any) => {

  if (e == 2) {
    Addelmessage = '表单分类管理-修改'

    AddButton = "修改"

    ruleForm.TypeId = row.TypeId
    ruleForm.TypeNo = row.TypeNo
    ruleForm.TypeName = row.TypeName
    ruleForm.ProfessionalId = row.ProfessionalId

    dialogFormVisible.value = true
  }



}*/

//添加
interface RuleForm {
  TypeId: number
  TypeNo: string
  TypeName: string
  ProfessionalId: number
  IsDel: boolean
}

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  TypeId: 0,
  TypeNo: '',
  TypeName: '',
  ProfessionalId: 0,
  IsDel: false,
})

const locationOptions = ['Home', 'Company', 'School']

const rules = reactive<FormRules<RuleForm>>({
  TypeName: [
    { required: true, message: '请输入问题类型名称', trigger: 'blur' },
  ],
  ProfessionalId: [
    {
      required: true,
      message: '请选择',
      trigger: 'change',
    },
  ],
})

//添加修改的方法
const inputUser = async () => {
  if (ruleForm.TypeId) {//有id则是修改

    await UpdateFormType(ruleForm)
    ElMessage.success('修改成功')
  }
  else {//否则是添加
    ruleForm.TypeNo = '后台获取'

    await AddFormType(ruleForm)
    ElMessage.success('添加成功')
  }
}

/*const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      console.log('submit!', ruleForm)
      if (ruleForm.TypeId == 0) {

        ruleForm.TypeNo = '后台获取'

        const res = await AddFormType({
          ruleForm
        })
        console.log(res)
        ElMessage.success('添加成功')
        Show();
      }
      else {
        axios({
          url: 'http://10.222.12.60:5188/api/FormTypeInfo/UpdateFormTypeInfo',
          method: 'post',
          data: ruleForm
        })
          .then(res => {
            console.log(res)
            if (res.data.code == 200) {
              ElMessage.success('修改成功')
              Show();
            }
          })
          .catch(err => {
            console.log(err)
          })
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}*/

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

//表单专业类型下拉框
const FromTypeSel = ref<IfromTypeList[]>([]);

const FromTypeSelect = async () => {
  const res = await GetGirdList({

  });
  console.log(res)
  FromTypeSel.value = res.data.Result;
}


//表单列表
const FormTypeInfoList = reactive({
  TotalCount: 0,
  TotalPage: 0,
  pageData: []
});

const Look = reactive({
  PageIndex: 1,
  PageSize: 3,
  TypeNo: '',
  ProfessionalId: null
})

//表单数据列表
const Show = async () => {
  const res = await PageFormType({
    PageIndex: Look.PageIndex,
    PageSize: Look.PageSize,
    TypeNo: Look.TypeNo,
    ProfessionalId: Look.ProfessionalId
  })

  console.log(res);

  FormTypeInfoList.pageData = res.data.Result.Data;
  FormTypeInfoList.TotalCount = res.data.Result.TotalCount;
  FormTypeInfoList.TotalPage = res.data.Result.TotalPage;

}

//查询条件重置按钮
const Resert = () => {
  Look.TypeNo = "";
  Look.ProfessionalId = null;

  Show();
}

//表单分页
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  Look.PageSize = val;
  Show();
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  Look.PageIndex = val;
  Show();
}

//表单删除
const Del = (id: any) => {
  ElMessageBox.confirm(
    '您确定要删除嘛?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios({
        url: 'http://10.222.12.60:5188/api/FormTypeInfo/DelFormTypeInfo',
        method: 'post',
        params: {
          FormTypeInfoId: id
        }
      })
        .then(res => {
          console.log(res)
          if (res.data.code == 200) {
            ElMessage.success('删除成功')
            Show();
          }
        })
        .catch(err => {
          console.log(err)
        })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '操作已取消',
      })
    })
}


//监听分页数据
watch(Look, () => {
  Show();
}, { deep: true })

</script>

<style scoped>
.custom-breadcrumb {
  margin-bottom: 18px;
  font-size: 17px;
}

.breadcrumb-strong {
  font-weight: bold;
}
</style>